<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./css/无敌代码.css">
    <link rel="stylesheet" href=".//css/登录.css">
    <link rel="stylesheet" href="./css/注册.css">
</head>
<body>
    <div class="dl">
        <div class="dl-l">
            <img src="./imgs/mitu.jpg" alt="">
        </div>
        <div class="dl-r">
            <div class="dl-top">
                <p class="dl-p">
                    <img src="./imgs/小米logo.png" alt="">
                    <span>小米账号</span>
                </p>
                <div class="top-r">
                    <a href="">用户协议</a>
                    <a href="">隐私政策</a>
                    <a href="">帮助中心</a>
                    <span class="ggg">|</span>
                    <a href="">‎中文(简体)‎</a>
                    <span class="rrr"></span>
                </div>
            </div>
        </div>
        
    </div>
    <div class="box">
        <div class="box-p">
            <a href="./登录.html">登录</a>
            <a href="./注册.html" style="color: #ff5c00; font-weight: 400; font-size: 24px;">注册</a>
        </div>
        <form action="javascript:;">
        <div class="text">
            <input type="text" name="username" placeholder="请输入用户名">
        </div>
        <div class="text">
            <input type="email" name="email" placeholder="请输入邮箱">
        </div>
        <div class="pass">
            <input type="password" name="password" placeholder="请输入密码">
        </div>
        <div class="pass">
            <input type="password" name="repass" placeholder="请确认密码">
        </div>
        
        <div class="btn">
            <input type="button" value="注&nbsp;&nbsp;册" class="btn">
        </div>
        <div class="box-p2">
            <label for="">
                <input type="checkbox" name="agree">已阅读并同意小米帐号 
            </label>
        </div>
        <p class="zc-p1">其他方式注册</p>
        <div class="zc-img">
            <a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=http%3A%2F%2Fspcdp.cdposs.qq.com%2Fauth%2Fcallback&client_id=101477813&state=http%3A%2F%2Fspcdp.cdposs.qq.com%2F"><img src="./imgs/qq (1).png" alt=""></a>
            <a href="https://login.sina.com.cn/signup/signin.php"><img src="./imgs/qq (2).png" alt=""></a>
            <a href="https://auth.alipay.com/login/index.htm"><img src="./imgs/wx (2).png" alt=""></a>
            <a href="https://wx.qq.com/"><img src="./imgs/wx (1).png" alt=""></a>
        </div>
    </form>
    </div>
</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script>
// var btn=document.querySelector('.btn');
var username=document.querySelector('[name="username"]');
var password=document.querySelector('[name="password"]');
var repass=document.querySelector('[name="repass"]');
var email=document.querySelector('[name="email"]');

$('.btn').click(function(){
    if(username.value===''){
        layer.msg('用户名不能为空');
        // alert('用户名不能为空')
        return false
    }
    // 用户名规则
    var reg=/^[a-zA-Z]\w{3,7}$/;
    if(!reg.test(username.value)){
        layer.msg('用户名不符合规范')
        return false
    }
    if(password.value===''){
        layer.msg('密码不能为空')
        return false
    }
    // 密码规则
    var reg=/^[a-zA-Z]\w{2,10}$/;
    if(!reg.test(username.value)){
        layer.msg('密码不符合规范')
        return false
    }
    // 确认密码
    if(repass.value!==password.value){
        layer.msg('两次密码不一致')
        return false
    }
    //邮箱规则
    if(email.value===''){
        layer.msg('邮箱不能为空')
        return false
    }
    var reg=/(^[1-9]\d{4,10}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((163|126)\.com$)|yeah\.net$)/
    if(!reg.test(email.value)){
        layer.msg('请输入正确的邮箱')
        return false
    }
    //禁用提交按钮
    $(this).prop('disabled',true)
    //加载层
    var loadindex=layer.load(0,{
        shade: [1,'#000']
    });
    
    //发送ajax
    $.post('./php/register.php',$('form').serialize(),res=>{
        console.log(res);
        var {meta:{status,msg}}=res;
        layer.close(loadindex)
        if(status===2){
            layer.msg(msg,{
                icon:1,
                time:1500
            },function(){
               location.href="./登录.html"
            })
        }else{
            $(this).prop('disabled',false)
            layer.msg(msg,{
                icon:2,
                time:1500
            })
        }
    },'json')
    
})
</script>
</html>